<template>
	<view class="order-lists">
		<view class="order-lists__top">
			<view v-for="(item,index) in orderListsTab"
				:key="item.id"
				:data-index="index"
				:class="['order-lists__top-tab',{'active':currentIndexTab == index}]"
				@tap="handleSelectTab">
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="order-lists__main">
			<block v-if="orderLists.length">
				<view class="order-lists__item"
					v-for="(item,index) in orderLists"
					:data-orderid="item.out_trade_no"
					@click="handleToOrderDetail"
					:key="index">
					<view class="order-lists__item-left">
						<view class="order-lists__item-left__img">
							<image :src="item.service_logo_image_url"
								mode="scaleToFill"></image>
						</view>
						<view class="order-lists__item-left__main">
							<view class="order-lists__item-left__main-title">
								<text>{{item.service_name}}</text>
							</view>
							<view class="order-lists__item-left__main-hospital">
								<text>{{item.hospital_name}} ({{item.area_name}})</text>
							</view>
							<view class="
								order-lists__item-left__main-time">
								<text>处理时间 {{utils.formatTime(item.starttime,'MM-DD HH:mm')}}</text>
							</view>
						</view>
					</view>
					<view class="order-lists__item-right">
						<view class="order-lists__item-right__status">
							<view :class="{'pay_status':item.trade_state == '待支付'}">
								{{item.trade_state}}
							</view>
							<view class=""
								v-if="item.trade_state == '待支付'">
								<counter ref="counterRef"
									:time="item._exp_time"
									color="darkred"
									@counterOver="handleTimeover" />
							</view>
						</view>
					</view>
				</view>
			</block>

			<empty v-else />

		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref,
		toRaw
	} from 'vue'
	import {
		getOrderLists
	} from '../../api'
	import {
		onShow,
		onHide
	} from '@dcloudio/uni-app'
	import utils from '../../utils'
	import counter from '../../components/Counter/Counter.vue'
	const orderLists = ref([])
	onShow(() => {
		getOrderListByAll()
	})

	const orderListsTab = [{
		id: 1,
		name: '全部'
	}, {
		id: 2,
		name: '待支付'
	}, {
		id: 3,
		name: '待服务'
	}, {
		id: 4,
		name: '已完成'
	}, {
		id: 5,
		name: '已取消'
	}]
	const currentIndexTab = ref(0)
	const handleSelectTab = (e) => {
		const {
			index
		} = e.currentTarget.dataset
		currentIndexTab.value = index
	}

	const handleToOrderDetail = e => {
		const {
			orderid
		} = e.currentTarget.dataset

		uni.navigateTo({
			url: "/pages/order-detail/order-detail?orderid=" + orderid
		})
	}
	const counterRef = ref(null)
	onHide(() => {
		const timerLists = toRaw(counterRef.value)
		if (!timerLists) return
		timerLists.forEach(item => {
			item.clearTimer()
		})
	})

	onShow(() => {
		console.log("onshow");
		const timerLists = toRaw(counterRef.value)
		if (!timerLists) return
		timerLists.forEach(item => {
			item.init()
		})
	})

	const getOrderListByAll = async () => {
		const resultData = await getOrderLists()
		orderLists.value = resultData.data
	}

	const handleTimeover = () => {
		getOrderListByAll()
	}
</script>

<style lang="scss"
	scoped>
	.order-lists {
		&__top {
			position: fixed;
			display: flex;
			background-color: #f3f3f3;
			height: 60rpx;
			left: 0;
			top: 0;
			right: 0;
			align-items: center;
			justify-content: space-between;
			padding: 0 10rpx;

			&-tab {
				font-size: 26rpx;
				text-align: center;
				flex: 1;
				color: #c1c1c1;
				height: 60rpx;
				line-height: 60rpx;

				&.active {
					color: #000;
					font-weight: bold;
					border-bottom: 2rpx solid #000;
				}
			}
		}

		&__main {
			margin-top: 60rpx;

			.order-lists__item {
				// margin: 20rpx auto;
				padding: 40rpx;
				display: flex;


				&-left {
					display: flex;
					gap: 0 20rpx;
					flex: 1;

					&__img {
						width: 120rpx;
						height: 120rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					&__main {
						&-title {
							font-weight: bold;
							font-size: 28rpx;
						}

						&-hospital,
						&-time {
							font-size: 24rpx;
							color: #c1c1c1;
							margin: 10rpx auto;
						}
					}
				}

				&-right {
					width: 200rpx;

					&__status {
						text-align: center;
						font-size: 26rpx;
						color: #c1c1c1;

						.pay_status {
							color: darkred;
						}
					}
				}
			}
		}
	}
</style>